import React from "react";
import PropTypes from "prop-types";
import { routerRedux } from "dva/router";
import { connect } from "dva";
import { Row, Col, Button, Form, Select, Input, DatePicker, Modal } from "antd";
import { filterState, filterMediumType } from "utils/filter";
import moment from "moment";
import { formatDate } from "utils";

const { RangePicker, MonthPicker } = DatePicker;
const { TextArea } = Input;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 }
};
const dateFormat = "YYYY-MM-DD";
let timeStart = "";
let timeEnd = "";
const CheckingModal = ({
  form: { validateFields, getFieldsValue, getFieldDecorator },
  currentItem,
  onOk,
  onCancel,
  ...modalProps
}) => {
  const {
    borrowMediumType,
    borrowUserName,
    borrowReason,
    contactWay,
    borrowEndAt,
    borrowStartAt,
    id,
    documentId
  } = currentItem;
  const handleSubmit = e => {
    if (timeStart == "" || timeEnd == "") {
      timeStart = formatDate(borrowStartAt);
      timeEnd = formatDate(borrowEndAt);
    }
    validateFields((err, values) => {
      if (!err) {
        const params = {
          borrowStartAt: `${timeStart} 00:00:00`,
          borrowEndAt: `${timeEnd} 00:00:00`,
          borrowAuditOpinion: values["borrowAuditOpinion"] || "",
          documentId,
          id,
          type: 0
        };
        onOk(params, 1);
      }
    });
  };
  const handleSubmit1 = e => {
    if (timeStart == "" || timeEnd == "") {
      timeStart = formatDate(borrowStartAt);
      timeEnd = formatDate(borrowEndAt);
    }
    validateFields((err, values) => {
      if (!err) {
        const params = {
          borrowStartAt: `${timeStart} 00:00:00`,
          borrowEndAt: `${timeEnd} 00:00:00`,
          borrowAuditOpinion: values["borrowAuditOpinion"],
          documentId,
          id,
          type: 0
        };
        onCancel(params, 2);
      }
    });
  };  

  const onChange = (date, dateString) => {
    if (date && dateString) {
      timeStart = dateString[0];
      timeEnd = dateString[1];
    }
  };
  const props = {
    onOk: handleSubmit,
    onCancel:handleSubmit1,
    ...modalProps
  };
  return (
    <Modal {...props}>
      <Form>
        <FormItem {...formItemLayout} label="借阅方式">
          {getFieldDecorator("borrowMediumType", {
            initialValue: filterMediumType(borrowMediumType)
          })(<Input disabled />)}
        </FormItem>
        <FormItem {...formItemLayout} label="联系方式">
          {getFieldDecorator("contactWay", { initialValue: contactWay })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="借阅人">
          {getFieldDecorator("borrowUserName", {
            initialValue: borrowUserName
          })(<Input disabled />)}
        </FormItem>
        <FormItem {...formItemLayout} label="借阅时间">
          {getFieldDecorator("range-picker", {
            initialValue: [
              moment(formatDate(borrowStartAt), dateFormat),
              moment(formatDate(borrowEndAt), dateFormat)
            ]
          })(<RangePicker onChange={onChange} />)}
        </FormItem>
        <FormItem {...formItemLayout} label="借阅原因">
          {getFieldDecorator("borrowReason", { initialValue: borrowReason?borrowReason:'' })(
            <TextArea rows={4} disabled />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="审核意见">
          {getFieldDecorator("borrowAuditOpinion")(<TextArea rows={4} />)}
        </FormItem>
      </Form>
    </Modal>
  );
};

CheckingModal.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object
};

export default Form.create()(CheckingModal);
